 <template>
  <div>
    <el-button
      class="add-style"
      style="font-size:14px;padding:10px;"
      @click="addCategory"
      type="primary"
    >添加课程</el-button>

    <tTable :columns="columns" :data="category">
      <!-- 封面 -->
      <template v-slot:cover="slotProps">
        <img class="cover-style" :src="downImgHost + slotProps.scope.row.cover" alt>
      </template>
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          @click="checkDetail(slotProps.scope.row)"
          size="mini"
          type="primary"
          class="add-style"
        >查看列表</el-button>
        <el-button @click="editCategory(slotProps.scope.$index)" size="mini" type="warning">编辑</el-button>
        <el-button size="mini" type="danger" @click="removeCategory(slotProps.scope.row.id)">删除</el-button>
      </template>
    </tTable>

    <el-dialog title="编辑课程" width="40%" :visible.sync="editVisible">
      <el-form :model="formData" ref="formData" label-width="100px">
        <el-form-item label="课程封面">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            accept=".gif, .jpg, .jpeg, .bmp, .png"
            :headers="token"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="formData.cover" :src="downImgHost + formData.cover" class="cover-style">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item
          style="margin: 0 0 20px 0"
          prop="name"
          label="课程名"
          :rules="[{required: true, message: '添加新的课程', trigger: 'blur'}]"
        >
          <el-input style="width:200px" v-model="formData.name" placeholder="添加新的课程"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="add-style" type="primary" size="small" @click="addColumn">完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import tTable from "src/components/table/index.vue";

import { formatDateTime } from "src/util/time.js";
import { getAllVideo, deleteVideo } from "api/getData";
import { uploadImageUrl, downImgHost } from "../../config/env.js";
import { getToken } from "src/util/auth";
import { dataOptions } from "src/util/time";
import { creatPrice, getPrice, deletePrice, updatePrice } from "api/course";

import {
  getAllColumn,
  createColumn,
  deleteColumn,
  updateColumn
} from "api/getData";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        UPLOADING: "info", // 上传中
        SUCCESS: "success", // 成功
        FAIL: "danger" // 失败
      };
      return statusMap[status];
    },
    nameFilter(status) {
      const statusMap = {
        UPLOADING: "上传中", // 上传中
        SUCCESS: "成功", // 成功
        FAIL: "失败" // 失败
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      videoUrl: "", // 当前视频预览地址
      dislogVisible: false, //是否显示预览框
      searchData: "",
      category: [], // 分类
      formData: {}, // 编辑信息
      uploadUrl: uploadImageUrl,
      downImgHost: downImgHost,
      editVisible: false,
      token: { Authorization: "" }, // 上传图片需要的token
      currentId: "",

      priceList: [], // 价格列表
      priceData: {
        amount: "",
        courseId: "",
        effectiveLength: "",
        effectiveLengthUnit: "DAY"
      }, // 新的价格
      timeOptions: dataOptions,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          slot: "cover",
          attr: { prop: "cover", label: "封面" }
        },
        {
          attr: { prop: "createTime", label: "创建时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "370" }
        }
      ]
    };
  },
  components: { tTable },

  mounted() {
    this.getData();
    this.token.Authorization = getToken();
  },
  methods: {
    getData: function(pageNumber) {
      getAllColumn().then(res => {
        this.category = res.map(item => {
          item.isEdit = false;
          item.checked = false;
          item.newName = item.name;
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    addColumn() {
      this.$refs.formData.validate(val => {
        if (val) {
          if (this.currentId) {
            updateColumn(this.currentId, this.formData).then(res => {
              this.$message.success("修改成功");
              this.getData();
            });
          } else {
            createColumn(this.formData).then(res => {
              this.$message.success("添加成功");
              this.getData();
            });
          }
          this.editVisible = false;
        } else {
          return false;
        }
      });
    },
    addCategory() {
      this.formData = {};
      this.editVisible = true;
      this.currentId = "";
    },
    checkDetail(row) {
      this.$router.push("/course/" + row.id);
    },
    editCategory(index) {
      this.formData = this.category[index];
      this.editVisible = true;
      this.currentId = this.category[index].id;
    },
    handleAvatarSuccess(res) {
      if (res.status > 200) {
        this.$message.error(res.message);
        return;
      }
      this.formData.cover = res.data;
    },
    removeCategory(id) {
      this.$confirm("确认删除分类么？")
        .then(_ => {
          deleteColumn(id).then(res => {
            this.$message.success("删除成功");
            this.getData();
          });
        })
        .catch(_ => {});
    },
    // -------------价格---------------
    addPrice() {
      this.$refs.priceData.validate(val => {
        if (val) {
          let priceData = this.priceData;
          if (priceData.effectiveLengthUnit === "FOREVER") {
            delete priceData.effectiveLength;
          }

          creatPrice(priceData).then(res => {
            this.$message.success("添加成功");
            this.getPrice(this.priceData.courseId);
          });
        } else {
          return false;
        }
      });
    },
    changePrice(item, index) {
      if (item.name === item.newName) {
        this.priceList[index].isEdit = false;
      } else {
        updatePrice(item.id, item.newName).then(res => {
          this.$message.success("修改成功");
          this.getPrice(this.priceData.courseId);
        });
      }
    },
    getPrice(id) {
      getPrice(id).then(res => {
        this.priceList = res.map(item => {
          item.time = tanslateTime(
            item.effectiveLength,
            item.effectiveLengthUnit
          );
          item.isEdit = false;
          item.checked = false;
          item.newName = item.name;
          return item;
        });
      });
    }
    // -------------价格---------------
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

//----------------封面上传---------------
.avatar-uploader {
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px dotted #f1f1f1;
  border-radius: 10px;
  width: 140px;
  height: 140px;
  margin: 10px 0;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
//----------------封面上传---------------

.cover-style {
  height: 100px;
}

</style>
